<template>
  <div class="theme-body">
      <div class="theme-box" v-for="(item,key) in theme" :key="key" @click="changeTheme(key)">
          <div class="theme-show">
              <div class="theme-left" :style="'background-color:'+item.left_bg"></div>
              <div class="theme-right">
                  <div class="theme-right-head"></div>
              </div>
          </div>
          <div class="theme-name">{{item.name}}</div>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            theme : [
                {left_bg : '#203244',head_bg:'#fff',head_color:'#333',name:'默认主题'},
                {left_bg : '#E6A23C',head_bg:'#fff',head_color:'#333',name:'深秋季节'},
                {left_bg : '#F56C6C',head_bg:'#fff',head_color:'#333',name:'半天朱霞'},
                {left_bg : '#409EFF',head_bg:'#fff',head_color:'#333',name:'碧海蓝天'},
                {left_bg : '#67C23A',head_bg:'#fff',head_color:'#333',name:'青青草原'}
            ]
        }
    },
    methods:{
        changeTheme(key){
            localStorage.setItem('theme',JSON.stringify(this.theme[key]));
            this.$emit('change');
        }
    }
}
</script>

<style scoped>
@import url('../../assets/css/app/theme.css');
</style>